<template>
  <image :src="src" :mode="mode" :show-menu-by-longpress="showMenuByLongpress" class="img"></image>
</template>

<script>
import { mapState } from 'vuex'
import { isLocal } from '@/env'
export default {
  name: 'CommonImage',
  components: {},
  props: {
    imageUrl: {
      type: String,
      default () {
        return ''
      }
    },
    isNetwork: {
      type: Boolean,
      default: false
    },
    showMenuByLongpress: {
      type: Boolean,
      default: false
    },
    mode: {
      type: String,
      default () {
        return 'widthFix'
      }
    }
  },
  computed: {
    ...mapState({
      assetMap: (state) => state.assetMap
    }),
    src () {
      if (this.isNetwork) {
        return this.imageUrl
      }
      if (isLocal()) {
        return process.env.LOCAL_SERVER + '/static/' + this.imageUrl
      }
      return !this.assetMap || !this.assetMap[this.imageUrl] ? '' : this.assetMap[this.imageUrl].replace(/\\/g, '/')
    }
  },
  mounted () {},
  methods: {},
  watch: {}
}
</script>

<style scoped>
.img {
  width: 100%;
  height: 100%;
}
</style>
